// src/components/scholarDashboard/mainContent/Overview.tsx

import { useState } from 'react';
import { FaUserGraduate } from 'react-icons/fa';
import { FaLock } from 'react-icons/fa';
import RecentScholarsModal from '@/components/popups/scholarOverview/RecentScholars/RecentScholarsModal';
import { useUserStore } from '@/store/userStore';
import BatchUpdateITEModal from '@/components/popups/scholarOverview/batchUpdateITE/BatchUpdateITEModal';

const Overview = () => {
  const [showModal, setShowModal] = useState(false);
  const [showBatchModal, setShowBatchModal] = useState(false);
  const user = useUserStore.getState().user;

  const isAdmin = user && user.role === 'Admin';

  const cardClass =
    'flex flex-col items-center justify-center w-full max-w-xs sm:max-w-sm md:max-w-md h-48 sm:h-56 md:h-60 px-6 sm:px-8 md:px-10 py-8 sm:py-10 md:py-12 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-2xl shadow-lg hover:shadow-2xl hover:border-blue-400 dark:hover:border-cyan-700 transition-all duration-300 transform hover:-translate-y-2 hover:scale-105 cursor-pointer text-center group';

  const iconStyle = 'text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-blue-500 dark:text-cyan-400 mb-6 drop-shadow-sm group-hover:text-blue-600 dark:group-hover:text-cyan-300 transition-all duration-300 group-hover:scale-110';
  const titleStyle = 'text-lg sm:text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 group-hover:text-blue-700 dark:group-hover:text-cyan-300 transition-all duration-300 mb-2';
  const subtitleStyle = 'text-sm sm:text-base md:text-lg text-gray-500 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-cyan-300 transition-all duration-300';

  return (
    <div className="py-8 sm:py-12 md:py-16 px-4 sm:px-6 md:px-8 max-w-5xl mx-auto">
      <div className="mb-12 text-center">
        <h1 className="font-extrabold text-gray-900 dark:text-cyan-300 mb-4 tracking-tight drop-shadow-sm text-xl sm:text-2xl md:text-3xl lg:text-4xl">
          Scholars Data Overview
        </h1>
        <p className="text-gray-600 dark:text-gray-300 max-w-3xl mx-auto text-sm sm:text-base md:text-lg leading-relaxed">
          Explore recent scholars and their most up-to-date placement and sponsor information with comprehensive analytics and insights.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 md:gap-10 justify-center items-center place-items-center">
        <div onClick={() => setShowModal(true)} className={`${cardClass} group`}>
          <FaUserGraduate className={iconStyle} />
          <div>
            <div className={titleStyle}>Recent Scholars</div>
            <div className={subtitleStyle}>Overview & Placement</div>
          </div>
        </div>
        {isAdmin && (
          <div onClick={() => setShowBatchModal(true)} className={`${cardClass} group`}>
            <FaLock className={iconStyle} />
            <div>
              <div className={titleStyle}>Batch Update ITE Dashboard</div>
              <div className={subtitleStyle}>Admin Only: Batch Edit ITE Fields</div>
            </div>
          </div>
        )}
      </div>

      {showModal && (
        <RecentScholarsModal onClose={() => setShowModal(false)} />
      )}
      {showBatchModal && (
        <BatchUpdateITEModal onClose={() => setShowBatchModal(false)} />
      )}
    </div>
  );
};

export default Overview;